<template>
  <div class="meters container">
    <div class="title">
      我的电表
    </div>
    <div class="search">
      <img src="../../public/images/meters/Fill 1@2x.png"/>
      <input type="text">
    </div>
    <div class="list">
      <div class="meter">
        <div class="meter-title">上海派十梯能源科技有限公司</div>
        <div class="meter-address">派能大厦A座102室</div>
        <div class="detail">
          <div class="status normal">
            <img src="../../public/images/meters/METER@2x.png"/>
            <div class="text">运行正常</div>
          </div>
          <div class="energy">
            <div class="meter-row">
              <label class="label">电表编号</label>
              <div class="text">2019004526</div>
            </div>
            <div class="meter-row">
              <label class="label">剩余电量</label>
              <div class="text">312.6
                <div class="suffix">kWh</div>
              </div>
            </div>
            <div class="btns">
              <button class="btn btn-read">读表状态</button>
              <button class="btn btn-charge" @click="charge">在线充值</button>
              <button class="btn btn-record">充电记录</button>
            </div>
          </div>
        </div>
      </div>
      <div class="meter">
        <div class="meter-title">上海派十梯能源科技有限公司</div>
        <div class="meter-address">派能大厦A座102室</div>
        <div class="detail">
          <div class="status arrearage">
            <img src="../../public/images/meters/METER@2x(1).png"/>
            <div class="text">停电欠费</div>
          </div>
          <div class="energy">
            <div class="meter-row">
              <label class="label">电表编号</label>
              <div class="text">2019004526</div>
            </div>
            <div class="meter-row">
              <label class="label">剩余电量</label>
              <div class="text">312.6
                <div class="suffix">kWh</div>
              </div>
            </div>
            <div class="btns">
              <button class="btn btn-read">读表状态</button>
              <button class="btn btn-charge" @click="charge">在线充值</button>
              <button class="btn btn-record">充电记录</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Meters",
    methods: {
      charge() {
        this.$router.push({path: 'charge'})
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../style/scss_common";

  .meters {
    .search {
      display: flex;
      background: rgba(216, 216, 216, 0.1);
      border-radius: j(16);
      margin: j(30) 0;

      img {
        width: j(36);
        height: j(36);
        margin: j(12) j(20);
      }

      input {
        flex: 1;
        font-size: j(28);
        font-family: MicrosoftYaHei;
        color: rgba(109, 114, 120, 1);
        line-height: j(38);
      }
    }

    .list {
    }
  }
</style>
